<template>
  <view class="relative overflow">
    <tm-sheet
      :darkBgColor="props.darkBgColor"
      @click="cellClick"
      :color="props.color"
      :followTheme="props.followTheme"
      :dark="props.dark"
      :followDark="props.followDark"
      :round="props.round"
      :shadow="props.shadow"
      :outlined="props.outlined"
      :border="props.border"
      :borderStyle="props.borderStyle"
      :borderDirection="props.borderDirection"
      :text="props.text"
      :transprent="props.transprent"
      :linear="props.linear"
      :linearDeep="props.linearDeep"
      :width="props.width"
      :height="props.height"
      :margin="props.margin"
      :padding="props.padding"
      :_class="props._class"
      :_style="props._style"
      hover-class="opacity-6"
    >
      <view
        :userInteractionEnabled="true"
        class="flex flex-row flex-row-center-center"
        :class="[_computedValue.url ? 'url' : '']"
      >
        <view
          v-if="_computedValue.showAvatar"
          :style="{
            width: `${_computedValue.avatarSize}rpx`,
            height: `${_computedValue.avatarSize}rpx`,
          }"
          class="flex flex-row flex-row-center-center"
        >
          <slot name="avatar">
            <tm-image
              :round="_computedValue.avatarRound"
              :width="_computedValue.avatarSize"
              :height="_computedValue.avatarSize"
              :src="_computedValue.avatar"
            ></tm-image>
          </slot>
        </view>

        <view class="flex-1 flex flex-row flex-row-center-between" style="width: 0px">
          <view>
            <view class="flex flex-5 flex-col" :class="[_computedValue.showAvatar ? 'pl-24' : '']">
              <slot name="title">
                <tm-text
                  :color="_computedValue.titleColor"
                  :fontSize="_computedValue.titleFontSize"
                  :label="_computedValue.title"
                ></tm-text>
              </slot>
              <slot name="label">
                <view v-if="_computedValue.label" class="mt-6">
                  <tm-text
                    :color="_computedValue.labelColor"
                    :fontSize="_computedValue.labelFontSize"
                    :label="_computedValue.label"
                  ></tm-text>
                </view>
              </slot>
            </view>
          </view>
          <view class="flex-1 flex-row flex-row-center-end" style="width: 0px">
            <slot name="rightText">
              <tm-text
                _class="nowrap pr-12"
                :color="_computedValue.rightColor"
                v-if="_computedValue.rightText"
                :fontSize="_computedValue.rightTextSize"
                :label="_computedValue.rightText"
              ></tm-text>
            </slot>
            <slot name="right">
              <tm-icon
                v-if="_computedValue.rightIcon"
                _class="opacity-3"
                :name="_computedValue.rightIcon"
                :fontSize="22"
              >
              </tm-icon>
            </slot>
          </view>
        </view>
      </view>
    </tm-sheet>
    <tm-divider
      v-if="_computedValue.bottomBorder"
      :margin="[0, 0]"
      :border="2"
      color="grey-3"
      :real-color="!store.tmStore.dark"
      :style="{
        left: `${
          _computedValue.avatar !== '' ? _computedValue.avatarSize + _computedValue.margin[0] : 0
        }rpx`,
      }"
    ></tm-divider>
  </view>
</template>

<script lang="ts" setup>
  /**
   * 单元格
   * @description 常用于列表
   * @example 示例
   * <tm-sheet :round="8" :padding="[0,0]">
      <tm-cell :bottomBorder="false" title="这是标题"></tm-cell>
      <tm-cell :bottomBorder="false"  title="这是标题"></tm-cell>
      <tm-cell  :bottomBorder="false" title="这是标题"></tm-cell>
      <tm-cell :bottomBorder="false"  title="设置" rightText="已阅读同意">
        <template v-slot:right>
          <tm-checkbox ></tm-checkbox>
        </template>
      </tm-cell>
    </tm-sheet>
   */
  import tmSheet from '../tm-sheet/tm-sheet.vue';
  import tmText from '../tm-text/tm-text.vue';
  import tmIcon from '../tm-icon/tm-icon.vue';
  import tmImage from '../tm-image/tm-image.vue';
  import tmDivider from '../tm-divider/tm-divider.vue';
  import { getCurrentInstance, computed, PropType } from 'vue';
  import { cssDirection } from '../../tool/lib/interface';
  import { custom_props } from '../../tool/lib/minxs';
  import { useTmpiniaStore } from '@/tmui/tool/lib/tmpinia';
  const emits = defineEmits(['click']);
  const props = defineProps({
    ...custom_props,
    shadow: {
      type: [Number],
      default: 0,
    },
    round: {
      type: [Number, Array] as PropType<Array<number> | number>,
      default: 0,
    },
    margin: {
      type: Array as PropType<Array<number>>,
      default: () => [32, 0],
    },
    padding: {
      type: Array as PropType<Array<number>>,
      default: () => [24, 24],
    },
    height: {
      type: [Number],
      default: 0,
    },
    width: {
      type: [Number],
      default: 0,
    },
    transprent: {
      type: [Boolean],
      default: false,
    },
    color: {
      type: String,
      default: 'white',
    },
    //标题
    title: {
      type: String,
      default: '',
    },
    titleFontSize: {
      type: [Number],
      default: 28,
    },
    titleColor: {
      type: String,
      default: '',
    },
    //标题下方的介绍
    label: {
      type: String,
      default: '',
    },
    labelFontSize: {
      type: [Number],
      default: 22,
    },
    labelColor: {
      type: String,
      default: 'grey',
    },
    //右边文字
    rightText: {
      type: String,
      default: '',
    },
    rightIcon: {
      type: String,
      default: 'tmicon-angle-right',
    },
    //右边文字
    rightColor: {
      type: String,
      default: 'grey',
    },
    //右边文字大小。
    rightTextSize: {
      type: Number,
      default: 24,
    },
    showAvatar: {
      type: Boolean,
      default: false,
    },
    //头像。
    //https://picsum.photos/200
    avatar: {
      type: String,
      default: '',
    },
    avatarSize: {
      type: Number,
      default: 60,
    },
    avatarRound: {
      type: Number,
      default: 10,
    },
    border: {
      type: [Number],
      default: 0,
    },
    borderDirection: {
      type: [String],
      default: cssDirection.bottom,
    },
    //显示下边线
    bottomBorder: {
      type: [Boolean],
      default: false,
    },
    //当有链接地址时，将打开链接
    url: {
      type: String,
      default: '',
    },
    //暗下强制的背景色，
    //有时自动的背景，可能不是你想要暗黑背景，此时可以使用此参数，强制使用背景色，
    //只能是颜色值。
    darkBgColor: {
      type: String,
      default: '',
    },
  });

  const store = useTmpiniaStore();

  function cellClick(e: any) {
    emits('click', e);
    if (props.url !== '') {
      try {
        uni.navigateTo({
          url: props.url,
          fail(error) {
            console.error('打开连接错误：', error);
          },
        });
      } catch (e) {
        //TODO handle the exception
      }
    }
  }

  const _computedValue = computed(() => props);
</script>

<style scoped>
  .url {
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
  }
</style>
